<script setup>
import { reactive, ref, useAttrs, useSlots } from "vue";

// 接受参数
const props = defineProps({
    componentName: String
})

// 未接受的参数在这里面
const attres = useAttrs()
console.log(attres)

// 插槽在这里面
const slots = useSlots()
console.log(attres)

// 传递方法
const emit = defineEmits(['onDian'])
function test () {
    emit('onDian', 46)
}

/*
 * 声明变量 ref ---> 基本类型
 * ref也可以用来定义 对象（或数组）类型的数据，它内部自动通过 reactive 转为代理对象
 * 原理，使用了 Object.defineProperty()的 get 与 set 来实现响应式 （数据劫持）
 */
let count = ref(0);

/*
 * 声明对象变量 reactive ---> 对象（或数组）类型的数据
 * 原理，使用了 ES6 新特性 Proxy 代理对象 来实现响应式 （数据劫持），并通过 Reflect 操作源对象内部的数据
 */
const role = reactive([
    { name: "德玛", force: 60, id: 1 },
    { name: "光辉", force: 70, id: 2 },
    { name: "盲僧", force: 80, id: 3 },
    { name: "亚索", force: 90, id: 4 },
]);
function demo() {
    role[0].name = "德玛西亚";
    if (!role.find((item) => item.name === "螳螂")) {
        role.push({
            name: "螳螂",
            force: 90,
            id: role.length + 1,
        });
    }
    count.value = 0;
}
</script>

<template>
    <h1>{{ componentName }}</h1>
    <button @click="count++">数值{{count}}</button>
    <button @click="demo">重置数值</button>
    <ul class="mtb">
        <li v-for="item in role" :key="item.id">{{item.name}}</li>
    </ul>
    <button class="mtb" @click="test">测试emit</button>
    <slot name="qwe"></slot>
</template>

<style scoped>
ul {
    width: 100px;
    margin: 0 auto;
}
.mtb{
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>
